import React, { Component } from "react";
import { Input, Select, TreeSelect, Icon, Form } from "antd";
import { connect } from "dva";
import SelectModal from "./SelectModal";
import styles from "./BasicInfo.less";

const { Option } = Select;

@connect(stores => ({
  coldata: stores.user,
  orgList: stores.adddataSource,
  personDep: stores.personSelectModel,
  appListData: stores.appListData
}))
@Form.create()
class BasicInfo extends Component {
  state = {
    selectVisible: false
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "adddataSource/getOrgList",
      payload: {}
    });
    dispatch({
      type: "appListData/getAppList",
      payload: { pageSize: 99999 }
    });
  }

  source = e => {
    const { source } = this.props;
    source(e);
  };

  app = value => {
    const { app } = this.props;
    app(value);
  };

  depart = (e, props) => {
    const { depart } = this.props;
    depart(e, props[0]);
  };

  dataType = e => {
    const { dataType } = this.props;
    dataType(e);
  };

  confirm = (e, desc) => {
    const { manage } = this.props;
    manage(e, desc);
    this.setState({ selectVisible: false });
  };

  closeModal = () => {
    this.setState({ selectVisible: false });
  };

  render() {
    const { selectVisible } = this.state;
    const {
      orgList,
      appListData: { appList = [] }
    } = this.props;
    const { orgTree = [] } = orgList;
    const { getFieldDecorator } = this.props.form;
    const { tmp, editable, manisible } = this.props;
    return (
      <div className={styles.root}>
        <SelectModal
          select={[String(tmp.manager)]}
          selectdesc={[tmp.managerName]}
          visible={selectVisible}
          closeModal={this.closeModal}
          confirm={this.confirm}
          isMutiple={false}
          manager={true}
        />
        <div className={styles.title}>基本信息</div>
        <div className={styles.info}>
          <div className={styles.choice1}>
            <div style={{ display: "flex", marginTop: 4 }}>
              <span className={styles.star}>*</span>
              数据源名称：
            </div>
            <Form>
              <Form.Item>
                {getFieldDecorator("sourceName", {
                  rules: [{ max: 20, message: "数据源名称少于20个字" }],
                  initialValue: tmp.sourceName
                })(
                  <Input
                    className={
                      this.props.sourceVisible ? styles.input : styles.notEmpty
                    }
                    placeholder="请输入数据源名称"
                    onChange={this.source}
                    value={tmp.sourceName}
                    // maxLength={25}
                  />
                )}
              </Form.Item>
            </Form>
          </div>
          {this.props.sourceVisible ? (
            <span className={styles.hint}>数据源名称不能为空</span>
          ) : null}
          <div className={styles.choice2}>
            <div style={{ marginTop: 4 }}>应用名称：</div>
            <Form>
              <Form.Item>
                {getFieldDecorator("appName", {
                  rules: [{ max: 25, message: "应用名称少于25个字" }],
                  initialValue: tmp.appId ? String(tmp.appId) : undefined
                })(
                  <Select
                    style={{ width: 466 }}
                    placeholder="请输入来源应用名称"
                    onChange={this.app}
                    showSearch
                    allowClear
                    filterOption={(input, option) =>
                      option.props.children
                        .toLowerCase()
                        .indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    {appList.map(item => (
                      <Option value={`${item.appId}`} key={item.appId}>
                        {item.appName}
                      </Option>
                    ))}
                  </Select>
                )}
              </Form.Item>
            </Form>
          </div>
          <div className={styles.choice3}>
            <span className={styles.star}>*</span>
            管理员：
            <Input
              className={manisible ? styles.input : styles.notEmpty}
              placeholder="请选择管理员"
              value={tmp.managerName}
              onClick={() => {
                this.setState({ selectVisible: true });
              }}
              readOnly
              suffix={
                tmp.managerName && tmp.managerName !== "" ? (
                  <Icon
                    type="close-circle"
                    style={{ color: "rgba(0,0,0,0.25)" }}
                    onClick={() => this.props.manage([""], [""])}
                  />
                ) : null
              }
            />
          </div>
          {manisible ? (
            <span className={styles.hint}>管理员不能为空</span>
          ) : null}
          <div className={styles.choice4}>
            <span className={styles.star}>*</span>归属部门：
            <TreeSelect
              treeData={orgTree}
              className={this.props.depVisible ? styles.tree : styles.notEmpty}
              dropdownStyle={{ maxHeight: 350, overflow: "auto" }}
              onChange={this.depart}
              value={String(tmp.department)}
              showCheckedStrategy="SHOW_PARENT"
              disabled={!editable}
            />
          </div>
          {this.props.depVisible ? (
            <span className={styles.hint}>部门不能为空</span>
          ) : null}
          <div className={styles.choice5}>
            <span className={styles.star}>*</span>数据源类型：
            <Select
              style={{ width: 466 }}
              onChange={this.dataType}
              value={tmp.type}
              disabled={!editable}
            >
              <Option value={1}>API</Option>
              <Option value={2}>ADS</Option>
              <Option value={3}>DataHub</Option>
              <Option value={4}>Loghub</Option>
            </Select>
          </div>
        </div>
      </div>
    );
  }
}

export default BasicInfo;
